<!-- 添加/修改直播 -->
<template>
  <div id="createLiveVideo">
    <el-form :model="liveVideoForm" :rules="rules" ref="liveVideoForm" :inline="true" label-position="info_style"
             label-width="150px">
      <div class="info">直播内容</div>
      <div class="info_style">
        <el-form-item label="直播标题" prop="title">
          <el-input v-model="liveVideoForm.title" placeholder="请输入" style="width:260px"></el-input>
        </el-form-item>
        <el-form-item label="视频房间号" prop="roomNo">
          <el-input v-model="liveVideoForm.roomNo" placeholder="请输入" style="width:260px"></el-input>
        </el-form-item>
        <!-- <el-form-item label="频道类型" prop="channelType">
          <el-select v-model="liveVideoForm.channelType" placeholder="请选择直播类型" style="width:260px">
             <el-option v-for="item in channelTypeList"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
       </el-form-item> -->
        <el-form-item label="直播类型" prop="type">
          <el-select v-model="liveVideoForm.type" placeholder="请选择直播类型" style="width:260px">
            <el-option v-for="item in liveTypeList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直播分类" prop="categoryId">
          <el-select v-model="liveVideoForm.categoryId" placeholder="请选择直播分类" style="width:260px">
            <el-option v-for="item in categoryList"
                       :key="item.id"
                       :label="item.categoryName"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="直播时间" prop="liveTime">
          <el-date-picker v-model="liveVideoForm.liveTime" style="width:260px" type="datetime"
                          format="yyyy-MM-dd hh:mm:ss"
                          placeholder="请选择">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="主播" prop="anchorId">
          <el-select v-model="liveVideoForm.anchorId" placeholder="请选择主播" style="width:260px">
            <el-option v-for="item in LiveAnchorList"
                       :key="item.id"
                       :label="item.anchorName"
                       :value="item.id">
              <span style="float: left">{{ item.anchorName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.anchorCode }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提问次数限制" prop="questionLimit">
          <el-select @change="dealQuestionCount" v-model="liveVideoForm.questionLimit" placeholder="请选择提问次数限制"
                     style="width:260px">
            <el-option v-for="item in questionLimitList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="liveVideoForm.questionLimit == 0" label="提问次数">
          <el-input style="width:260px" disabled></el-input>
        </el-form-item>
        <el-form-item v-else label="提问次数" prop="questionCount">
          <el-input v-model="liveVideoForm.questionCount" style="width:260px"></el-input>
        </el-form-item>
        <el-form-item label="直播简介" prop="liveInfo">
          <el-input type="textarea" v-model="liveVideoForm.liveInfo" style="width:690px"></el-input>
        </el-form-item>
        <el-form-item label="直播主图" ref="ElUpload" required>
          <el-upload ref="upload"
                     :action="uploadImg"
                     accept="image/*"
                     name="file"
                     list-type="picture-card"
                     :before-upload="beforeUpload"
                     :on-success="handleSuccess"
                     :show-file-list="false">
            <img v-if="liveVideoForm.liveCenterImg" :src="liveVideoForm.liveCenterImg"
                 style="width:147px;height:98px;margin-top:10px">
            <span slot="tip" class="el-upload__tip" style="margin-left:40px;">请上传PNG,JPG等格式的图片，比例为16:9</span>
            <i v-if="!liveVideoForm.liveCenterImg" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </div>
    </el-form>

    <div class="info">关联直播</div>
    <div class="info_style">
      <el-form :inline="true" label-width="40px" :stripe="false">
        <el-row>
          <el-table ref="ruleTable" :data="videoRelateDetailList" border>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="直播排序">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">直播排序</div>
                  <el-input v-model="scope.row.relateVideoSort" size="mini" :maxlength="30"
                            placeholder="请输入"></el-input>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="直播编号">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">直播编号</div>
                  <el-input v-model="scope.row.relateVideoNo" size="mini" :maxlength="30" placeholder="请输入"></el-input>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="delRelateRow(scope,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <br>
        <el-row>
          <div align="center">
            <el-button icon="el-icon-circle-plus-outline" size="mini" @click="addRelateRow">添加</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <div class="info">直播服务器</div>
    <div class="info_style">
      <el-form :inline="true" label-width="40px" :stripe="false">
        <el-row>
          <el-table ref="ruleTable" :data="videoServerDetailList" border>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="是否主服务器">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">是否主服务器</div>
                  <el-select v-model="scope.row.isMasterServer" size="mini" placeholder="请选择直播类型" style="width:260px">
                    <el-option v-for="item in isMasterServerList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="播放地址">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">播放地址</div>
                  <el-input v-model="scope.row.liveServer" size="mini" placeholder="请输入"></el-input>
                  <!-- <el-select v-model="scope.row.liveServer" size="mini" placeholder="请选择直播类型" style="width:260px">
                    <el-option v-for="item in liveServerList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select> -->
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="串流密钥">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">串流密钥</div>
                  <el-input v-model="scope.row.liveServerSecret" size="mini" placeholder="请输入"></el-input>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="delServerRow(scope,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <br>
        <el-row>
          <div align="center">
            <el-button icon="el-icon-circle-plus-outline" size="mini" @click="addServerRow">添加</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <div class="info">HLS配置</div>
    <div class="info_style">
      <el-form :inline="true" label-width="40px" :stripe="false">
        <el-row>
          <el-table ref="ruleTable" :data="videoHlsDetailList" border>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="是否预告">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">是否预告</div>
                  <el-select v-model="scope.row.isAdvance" size="mini" placeholder="请选择是否预告" style="width:260px">
                    <el-option v-for="item in isAdvanceServerList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="是否内网地址">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">是否内网地址</div>
                  <el-select v-model="scope.row.isIntranet" size="mini" placeholder="请选择是否内网地址" style="width:260px">
                    <el-option v-for="item in isIntranetList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="码率类型">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">码率类型</div>
                  <el-input v-model="scope.row.liveHlsType" size="mini" placeholder="请输入"></el-input>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="地址">
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">地址</div>
                  <el-input v-model="scope.row.liveHlsAddress" size="mini" placeholder="请输入"></el-input>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="delHlsRow(scope,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <br>
        <el-row>
          <div align="center">
            <el-button icon="el-icon-circle-plus-outline" size="mini" @click="addHlsRow">添加</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <div style="float:right;">
      <el-button type="primary" @click="back">返回</el-button>
      <el-button type="primary" v-if="this.$route.query.id" @click="update" :disabled="isDisable">修改</el-button>
      <el-button type="primary" v-else @click="submit" :disabled="isDisable">提交</el-button>
    </div>
  </div>
</template>

<script>
  import {liveVideoAPI, liveBasicAPI} from "@/api/index";

  export default {
    data() {
      return {
        loginUser: {
          uid: this.$root.uid,
          title: this.$root.title,
          email: this.$root.email
        },
        liveVideoForm: {
          title: "",//直播标题
          type: "",//直播类型
          roomNo: "",//房间号
          // channelType: "",//频道类型
          categoryId: "",//直播分类
          liveTime: "",//直播时间
          anchorId: "",//主播id
          questionLimit: "",//提问次数限制
          questionCount: "",//提问次数
          liveInfo: "",//直播简介
          liveCenterImg: '',//直播主图

          liveStatus: "",//直播状态
        },
        LiveAnchorList: [],
        categoryList: [],
        videoRelateDetailList: [],
        videoServerDetailList: [],
        videoHlsDetailList: [],
        uploadImg: '/live/common/uploadAttachment',
        liveTypeList: [
          {
            value: 0,
            label: "预告"
          },
          {
            value: 1,
            label: "回看"
          }],
        // channelTypeList: [
        // {
        //   value: 0,
        //   label: "直播"
        // },
        // {
        //   value: 1,
        //   label: "回看"
        // }],
        questionLimitList: [
          {
            value: 0,
            label: "不限制"
          },
          {
            value: 1,
            label: "限制"
          }],
        isMasterServerList: [
          {
            value: 0,
            label: "否"
          },
          {
            value: 1,
            label: "是"
          }],
        isAdvanceServerList: [
          {
            value: 0,
            label: "否"
          },
          {
            value: 1,
            label: "是"
          }],
        isIntranetList: [
          {
            value: 0,
            label: "是"
          },
          {
            value: 1,
            label: "否"
          }],
        liveServerList: [
          {
            value: 0,
            label: "live"
          },
          {
            value: 1,
            label: "live2"
          }],
        rules: {
          title: [{required: true, message: "直播标题不能为空"}],
          type: [{required: true, message: "直播类型不能为空"}],
          roomNo: [{required: true, message: "房间号不能为空"}],
          // channelType: [{ required: true, message: "频道类型不能为空" }],
          categoryId: [{required: true, message: "直播分类不能为空"}],
          liveTime: [{required: true, message: "直播时间不能为空"}],
          anchorId: [{required: true, message: "主播不能为空"}],
          questionLimit: [{required: true, message: "提问次数限制不能为空"}],
          questionCount: [{required: true, message: "提问次数不能为空"}],
          liveInfo: [{required: true, message: "直播简介不能为空"}],
        },
        loading: false,
        isDisable: false,

      };
    },
    created: function () {
      //判断是否可修改
      if (this.$route.query.id) {
        //根据id，获取直播详情
        this.getLiveVideoDto();
      }
      //获取主播集合
      this.getLiveAnchortList();
      //获取获取分类集合
      this.getCategoryList()
    },
    computed: {
      uploadDisabled: function () {
        return this.liveVideoForm.liveCenterImg.length > 0;
      },
    },
    methods: {
      //根据id，获取直播详情
      getLiveVideoDto() {
        let param = {
          id: this.$route.query.id
        }
        liveVideoAPI.getLiveVideoDto(param, res => {
          if (res) {
            this.liveVideoForm = res;
            this.videoRelateDetailList = res.videoRelateDetailList;
            this.videoServerDetailList = res.videoServerDetailList;
            this.videoHlsDetailList = res.videoHlsDetailList;
          }
        })
      },
      //获取主播集合
      getLiveAnchortList() {
        liveBasicAPI.getLiveAnchorList({}, res => {
          if (res) {
            this.LiveAnchorList = res;
          }
        })
      },
      //获取分类集合
      getCategoryList() {
        liveBasicAPI.getCategoryList({}, res => {
          if (res) {
            this.categoryList = res;
          }
        })
      },
      //处理提问次数
      dealQuestionCount() {
        if (this.liveVideoForm.questionLimit == 0) {
          this.liveVideoForm.questionCount = "";
        }
      },
      //添加关联直播行
      addRelateRow() {
        this.videoRelateDetailList.push({relateVideoSort: '', relateVideoNo: ''});
      },
      //删除关联直播行
      delRelateRow(scope, row) {
        this.videoRelateDetailList.splice(scope.$index, 1)
      },
      //添加直播服务器行
      addServerRow() {
        this.videoServerDetailList.push({isMasterServer: null, liveServer: '', liveServerSecret: ''});
      },
      //删除直播服务器行
      delServerRow(scope, row) {
        this.videoServerDetailList.splice(scope.$index, 1)
      },
      //添加HLS配置行
      addHlsRow() {
        this.videoHlsDetailList.push({isAdvance: null, isIntranet: null, liveHlsType: '', liveHlsAddress: ''});
      },
      //删除HLS配置行
      delHlsRow(scope, row) {
        this.videoHlsDetailList.splice(scope.$index, 1)
      },

      //提交
      submit() {
        //校验表单
        this.$refs["liveVideoForm"].validate(valid => {
          if (valid) {
            //提交按钮置灰
            this.isDisable = true;
            //校验关联明细
            var checkVideoRelateDetailList = this.checkVideoRelateDetailList(this.videoRelateDetailList);
            if (!checkVideoRelateDetailList) {
              this.isDisable = false;
              return
            }
            //校验直播服务器
            var checkVideoServerDetailList = this.checkVideoServerDetailList(this.videoServerDetailList);
            if (!checkVideoServerDetailList) {
              this.isDisable = false;
              return
            }
            //校验HLS配置
            var checkVideoHlsDetailList = this.checkVideoHlsDetailList(this.videoHlsDetailList);
            if (!checkVideoHlsDetailList) {
              this.isDisable = false;
              return
            }

            let param = {
              title: this.liveVideoForm.title,
              roomNo: this.liveVideoForm.roomNo,
              type: this.liveVideoForm.type,
              // channelType: this.liveVideoForm.channelType,
              categoryId: this.liveVideoForm.categoryId,
              liveTime: this.liveVideoForm.liveTime,
              anchorId: this.liveVideoForm.anchorId,
              questionLimit: this.liveVideoForm.questionLimit,
              questionCount: this.liveVideoForm.questionCount,
              liveInfo: this.liveVideoForm.liveInfo,
              liveCenterImg: this.liveVideoForm.liveCenterImg,
              videoRelateDetailList: this.videoRelateDetailList,
              videoServerDetailList: this.videoServerDetailList,
              videoHlsDetailList: this.videoHlsDetailList,
            }
            liveVideoAPI.createLiveVideo(param, res => {
              if (res) {
                this.messageSuccess("提交成功！");
                //提交按钮变亮
                this.isDisable = false;
                //跳转列表页面
                this.$router.push({path: '/liveVideoList'});
              } else {
                this.messageWarn("提交失败！")
                setTimeout(() => {
                  //提交按钮变亮
                  this.isDisable = false;
                }, 5000)
              }
            });
          }
        });
      },
      //修改
      update() {
        //校验表单
        this.$refs["liveVideoForm"].validate(valid => {
          if (valid) {
            //提交按钮置灰
            this.isDisable = true;
            //校验关联明细
            var checkVideoRelateDetailList = this.checkVideoRelateDetailList(this.videoRelateDetailList);
            if (!checkVideoRelateDetailList) {
              this.isDisable = false;
              return
            }
            //校验直播服务器
            var checkVideoServerDetailList = this.checkVideoServerDetailList(this.videoServerDetailList);
            if (!checkVideoServerDetailList) {
              this.isDisable = false;
              return
            }
            //校验HLS配置
            var checkVideoHlsDetailList = this.checkVideoHlsDetailList(this.videoHlsDetailList);
            if (!checkVideoHlsDetailList) {
              this.isDisable = false;
              return
            }
            let param = {
              id: this.$route.query.id,
              title: this.liveVideoForm.title,
              roomNo: this.liveVideoForm.roomNo,
              type: this.liveVideoForm.type,
              // channelType: this.liveVideoForm.channelType,
              categoryId: this.liveVideoForm.categoryId,
              liveTime: this.liveVideoForm.liveTime,
              liveStatus: this.liveVideoForm.liveStatus,
              anchorId: this.liveVideoForm.anchorId,
              questionLimit: this.liveVideoForm.questionLimit,
              questionCount: this.liveVideoForm.questionCount,
              liveInfo: this.liveVideoForm.liveInfo,
              liveCenterImg: this.liveVideoForm.liveCenterImg,
              videoRelateDetailList: this.videoRelateDetailList,
              videoServerDetailList: this.videoServerDetailList,
              videoHlsDetailList: this.videoHlsDetailList,
              liveNo: this.liveVideoForm.liveNo
            }
            liveVideoAPI.updateLiveVideo(param, res => {
              if (res) {
                this.messageSuccess("修改成功！");
                //提交按钮变亮
                this.isDisable = false;
                //跳转列表页面
                this.$router.push({path: '/liveVideoList'});
              } else {
                this.messageWarn("修改失败！")
                setTimeout(() => {
                  //提交按钮变亮
                  this.isDisable = false;
                }, 5000)
              }
            });
          }
        });
      },
      //返回
      back() {
        this.$router.push({path: "/liveVideoList"});
      },
      checkUploadFileDataList() {
        if (this.uploadFileDataList.length == 0) {
          this.messageWarn("请上传附件！")
          return false
        }
        return true
      },
      checkVideoRelateDetailList(relateDetailList) {
        if (relateDetailList.length == 0) {
          this.messageWarn("请输入关联直播");
          return false
        }
        for (var i = 0; i < relateDetailList.length; i++) {
          if (relateDetailList[i].relateVideoSort == null || relateDetailList[i].relateVideoSort == "") {
            this.messageWarn("请输入关联直播");
            return false
          }
          if (relateDetailList[i].relateVideoNo == null || relateDetailList[i].relateVideoNo == "") {
            this.messageWarn("请输入直播编号");
            return false
          }
        }
        return true
      },
      checkVideoServerDetailList(serverDetailList) {
        if (serverDetailList.length == 0) {
          this.messageWarn("请输入直播服务器");
          return false
        }
        for (var i = 0; i < serverDetailList.length; i++) {
          if (serverDetailList[i].isMasterServer == null) {
            this.messageWarn("请选择是否主服务器");
            return false
          }
          if (serverDetailList[i].liveServer == null || serverDetailList[i].liveServer == "") {
            this.messageWarn("请输入服务器地址");
            return false
          }
          if (serverDetailList[i].liveServerSecret == null || serverDetailList[i].liveServerSecret == "") {
            this.messageWarn("请输入串流密钥");
            return false
          }
        }
        return true
      },
      checkVideoHlsDetailList(hlsDetailList) {
        if (hlsDetailList.length == 0) {
          this.messageWarn("请输入HLS配置");
          return false
        }
        for (var i = 0; i < hlsDetailList.length; i++) {
          if (hlsDetailList[i].isAdvance == null) {
            this.messageWarn("请选择是否预告");
            return false
          }
          if (hlsDetailList[i].isIntranet == null) {
            this.messageWarn("请选择是否内网地址");
            return false
          }
          if (hlsDetailList[i].liveHlsType == null || hlsDetailList[i].liveHlsType == "") {
            this.messageWarn("请输入码率类型");
            return false
          }
          if (hlsDetailList[i].liveHlsAddress == null || hlsDetailList[i].liveHlsAddress == "") {
            this.messageWarn("请输入地址");
            return false
          }
        }
        return true
      },
      //文件上传成功的钩子函数
      handleSuccess(res, file) {
        if (file) {
          //将返回的文件储存路径赋值picture字段
          this.liveVideoForm.liveCenterImg = file.response.body.fileFurl;
          this.$message({type: 'info', message: '图片上传成功', duration: 6000});
        } else {
          this.messageWarn(file.response.error);
        }
      },
      //删除文件之前的钩子函数
      handleRemove(file, fileList) {
        this.liveVideoForm.liveCenterImg = '';
        this.$message({type: 'info', message: '已删除原有图片', duration: 6000});
      },
      //点击列表中已上传的文件事的钩子函数
      handlePreview(file) {
      },
      //上传的文件个数超出设定时触发的函数
      onExceed(files, fileList) {
        this.$message({type: 'info', message: '最多只能上传一张图片', duration: 6000});
      },
      beforeUpload(file) {
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          this.messageWarn("上传图片大小不能超过5MB!");
          return false;
        }
        return true;
      },
      resetForm(formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields();
        });
      },
      messageWarn(message) {
        this.$message({showClose: true, type: "warning", message: message});
      },
      messageSuccess(message) {
        this.$message({showClose: true, type: "success", message: message});
      },
      messageError(message) {
        this.$message({showClose: true, type: "error", message: message});
      },
      messageInfo(message) {
        this.$message({showClose: true, type: "info", message: message});
      },
      /**日期转换 */
      dateFormat: function (row, column) {
        let date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return formatDate(date);
      },
    },
  };

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mL57 {
    margin-left: 57px !important;
  }

  .title {
    font-size: 14px;
    color: #666;
  }

  .line {
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(231, 228, 235);
  }

  .info {
    margin-top: 30px;
    font-size: 20px;
    text-align: center;
  }

  .info_style {
    margin-top: 20px;
  }
</style>
